<!DOCTYPE HTML>
<html>

<head>
	<link rel="bookmark"  type="image/x-icon"  href="/img/logo_miccall.png"/>
	<link rel="shortcut icon" href="/img/logo_miccall.png">
	
			    <title>
    Ame雨
    </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="/amelin-ting/css/mic_main.css" />
    <link rel="stylesheet" href="/amelin-ting/css/dropdownMenu.css" />
    <meta name="keywords" content="Ame雨" />
    
    	<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
	 
    <noscript>
        <link rel="stylesheet" href="/amelin-ting/css/noscript.css" />
    </noscript>
    <style type="text/css">
        body:before {
          content: ' ';
          position: fixed;
          top: 0;
          background: url('/amelin-ting/img/bg.jpg') center 0 no-repeat;
          right: 0;
          bottom: 0;
          left: 0;
          background-size: cover; 
        }
    </style>

			    
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script async type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


    <script src="/amelin-ting/js/jquery.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrollex.min.js"></script>
    <script src="/amelin-ting/js/jquery.scrolly.min.js"></script>
    <script src="/amelin-ting/js/skel.min.js"></script>
    <script src="/amelin-ting/js/util.js"></script>
    <script src="/amelin-ting/js/main.js"></script>
	
<meta name="generator" content="Hexo 5.4.0"></head>
    
		
<!-- Layouts -->



<!--  代码渲染  -->
<link rel="stylesheet" href="/css/prism_coy.css" />
<link rel="stylesheet" href="/css/typo.css" />
<!-- 文章页 -->
<body class="is-loading">
    <!-- Wrapper 外包 s-->
    <div id="wrapper" class="fade-in">
        <!-- Intro 头部显示 s -->
        <!-- Intro 头部显示 e -->
        <!-- Header 头部logo start -->
        <header id="header">
    <a href="/amelin-ting/" class="logo">Art Space</a>
</header>
        <!-- Nav 导航条 start -->
        <nav id="nav" class="special" >
            <ul class="menu links" >
			<!-- Homepage  主页  --> 
			<li >
	            <a href="/amelin-ting/" rel="nofollow">主页</a>
	        </li>
			<!-- categories_name  分类   --> 
	        
	        <li class="active">
	            <a href="#s1">分类</a>
	                    <ul class="submenu">
	                        <li>
	                        <a class="category-link" href="/amelin-ting/categories/Go/">Go</a></li><li><a class="category-link" href="/amelin-ting/categories/django/">django</a></li><li><a class="category-link" href="/amelin-ting/categories/drf/">drf</a></li><li><a class="category-link" href="/amelin-ting/categories/gin/">gin</a></li><li><a class="category-link" href="/amelin-ting/categories/go/">go</a></li><li><a class="category-link" href="/amelin-ting/categories/linux/">linux</a></li><li><a class="category-link" href="/amelin-ting/categories/mysql/">mysql</a></li><li><a class="category-link" href="/amelin-ting/categories/python/">python</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%86%85%E7%BD%91%E7%A9%BF%E9%80%8F/">内网穿透</a></li><li><a class="category-link" href="/amelin-ting/categories/%E5%89%8D%E7%AB%AF/">前端</a>
	                    </ul>
	        </li>
	        
	        <!-- archives  归档   --> 
	        
	        
		        <!-- Pages 自定义   -->
		        
		        <li>
		            <a href="/about/" title="简历">
		                简历
		            </a>
		        </li>
		        
		        <li>
		            <a href="/group/" title="团队">
		                团队
		            </a>
		        </li>
		        
		        <li>
		            <a href="/gallery/" title="图库">
		                图库
		            </a>
		        </li>
		        
		        <li>
		            <a href="/tag/" title="标签">
		                标签
		            </a>
		        </li>
		        


            </ul>
            <!-- icons 图标   -->
			<ul class="icons">
                    
                    <li>
                        <a title="github" href="https://github.com/miccall" target="_blank" rel="noopener">
                            <i class="icon fa fa-github"></i>
                        </a>
                    </li>
                    
                    <li>
                        <a title="500px" href="http://500px.com" target="_blank" rel="noopener">
                            <i class="icon fa fa-500px"></i>
                        </a>
                    </li>
                    
			</ul>
</nav>

        <div id="main" >
            <div class ="post_page_title_img" style="height: 25rem;background-image: url(https://img0.baidu.com/it/u=3608020578,571175966&amp;fm=26&amp;fmt=auto);background-position: center; background-repeat:no-repeat; background-size:cover;-moz-background-size:cover;overflow:hidden;" >
                <a href="#" style="padding: 4rem 4rem 2rem 4rem ;"><h2 >前端JS(JavaScript)</h2></a>
            </div>
            <!-- Post -->
            <div class="typo" style="padding: 3rem;">
                <h2 id="一、JS简介"><a href="#一、JS简介" class="headerlink" title="一、JS简介"></a>一、JS简介</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>js也是一门编程语言 它也是可以写后端代码的</span><br><span class="line">	用js一统天下 前后端都可以写</span><br><span class="line">  	nodejs 支持js代码跑在后端服务器上</span><br><span class="line">    然而并不能 想的太天真了!!!</span><br><span class="line"><span class="number">2.</span>js跟java一毛钱关系都没有，纯粹是为了蹭当时java的热度</span><br><span class="line"></span><br><span class="line">    ECMAScript和JavaScript的关系</span><br><span class="line">    因此ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    JS版本</span><br><span class="line">        主要还是用的<span class="number">5.1</span>和<span class="number">6.0</span></span><br><span class="line"></span><br><span class="line">    JavaScript 是脚本语言</span><br><span class="line">    JavaScript 是一种轻量级的编程语言。</span><br><span class="line">    JavaScript 是可插入 HTML 页面的编程代码。</span><br><span class="line">    JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。</span><br><span class="line">    JavaScript 很容易学习</span><br><span class="line"></span><br><span class="line"><span class="number">3.</span>js的注释</span><br><span class="line">    <span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">    // 单行注释</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    /*</span></span><br><span class="line"><span class="string">    多行注释1</span></span><br><span class="line"><span class="string">    多行注释2</span></span><br><span class="line"><span class="string">    多行注释3</span></span><br><span class="line"><span class="string">    */</span></span><br><span class="line"><span class="string">    &quot;</span><span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="number">4.</span>两种引入方式</span><br><span class="line">	<span class="number">1.</span>script标签内部直接书写js代码</span><br><span class="line">  	<span class="number">2.</span>script标签src属性引入外部js代码</span><br><span class="line"></span><br><span class="line"><span class="number">5.</span>js语法结构</span><br><span class="line">	js是以分号作为语句的结束</span><br><span class="line">  	但是如果你不写分号，问题也不大 也能够正常执行 但是它就相当于没有结束符</span><br></pre></td></tr></table></figure>

<h2 id="二、变量与常量"><a href="#二、变量与常量" class="headerlink" title="二、变量与常量"></a>二、变量与常量</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>变量</span><br><span class="line">    <span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">    在js中 首次定义一个变量名的时候需要用关键字声明</span></span><br><span class="line"><span class="string">        1.关键字var</span></span><br><span class="line"><span class="string">            var name=&#x27;jason&#x27;</span></span><br><span class="line"><span class="string">        2.es6推出的新语法</span></span><br><span class="line"><span class="string">            let name=&#x27;jason&#x27;</span></span><br><span class="line"><span class="string">            如果你的编辑器支持的版本是5.1那么无法使用let</span></span><br><span class="line"><span class="string">            如果是6.0则向下兼容 var let</span></span><br><span class="line"><span class="string">    &quot;&quot;&quot;</span></span><br><span class="line">    var与let的区别</span><br><span class="line">        n = <span class="number">10</span></span><br><span class="line">        <span class="keyword">for</span> n <span class="keyword">in</span> <span class="built_in">range</span>(<span class="number">5</span>):</span><br><span class="line">          <span class="built_in">print</span>(n)</span><br><span class="line">        <span class="built_in">print</span>(n)  </span><br><span class="line">        var <span class="number">5</span>	let <span class="number">10</span></span><br><span class="line"></span><br><span class="line">    <span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">    var在for循环里面定义也会影响到全局</span></span><br><span class="line"><span class="string">    let在局部定义只会在局部生效</span></span><br><span class="line"><span class="string">	&quot;&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span>常量</span><br><span class="line"></span><br><span class="line">    <span class="comment"># python中没有真正意义上的常量 默认全大写就是表示常量</span></span><br><span class="line">    <span class="comment"># js中是有真正意义上的常量的</span></span><br><span class="line">    const pi = <span class="number">3.14</span></span><br><span class="line"> </span><br><span class="line"><span class="number">3.</span> 命名规范	</span><br><span class="line">    <span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">    js变量的命名规范</span></span><br><span class="line"><span class="string">        1.变量名只能是 </span></span><br><span class="line"><span class="string">            数字 字母 下划线 $</span></span><br><span class="line"><span class="string">        2.变量名命名规范(不遵循也可以)</span></span><br><span class="line"><span class="string">            1.js中推荐使用驼峰式命名</span></span><br><span class="line"><span class="string">                userName</span></span><br><span class="line"><span class="string">                dataOfDb</span></span><br><span class="line"><span class="string">            2.python推荐使用下划线的方式</span></span><br><span class="line"><span class="string">                user_name</span></span><br><span class="line"><span class="string">                data_of_db</span></span><br><span class="line"><span class="string">        3.不能用关键字作为变量名</span></span><br><span class="line"><span class="string">                不需要记忆 </span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">    js代码的书写位置</span></span><br><span class="line"><span class="string">        1.可以单独开设js文件书写</span></span><br><span class="line"><span class="string">        2.还可以直接在浏览器提供的console界面书写</span></span><br><span class="line"><span class="string">            在用浏览器书写js的时候 左上方的清空按钮只是清空当前页面 代码其实还在</span></span><br><span class="line"><span class="string">            如果你想要重新来 最好重新开设一个 页面</span></span><br><span class="line"><span class="string">            (在使用浏览器书写 你自己的js代码的时候推荐你在 自己的html页面打开)</span></span><br><span class="line"><span class="string">    &quot;&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="三、数值类型-number"><a href="#三、数值类型-number" class="headerlink" title="三、数值类型(number)"></a>三、数值类型(number)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// js也是一门面向对象的编程语言 即一切皆对象 同时js/python都是一门拥有动态类型的语言</span></span><br><span class="line"></span><br><span class="line">name = <span class="string">&#x27;ame&#x27;</span>;</span><br><span class="line">name = <span class="number">123</span>;</span><br><span class="line">name = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>];</span><br><span class="line"><span class="comment">// name可以指向任意的数据类型 但是有一些语言中 变量名之内指向一种后续不能更改</span></span><br><span class="line"></span><br><span class="line"><span class="number">1.</span>数值类型</span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">11</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">11.11</span>;</span><br><span class="line">    <span class="comment">//如何查看当前数据类型</span></span><br><span class="line">    <span class="keyword">typeof</span> a;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> a = <span class="number">11</span>;</span><br><span class="line">    <span class="keyword">var</span> b = <span class="number">11.11</span></span><br><span class="line">    <span class="keyword">typeof</span> a;</span><br><span class="line">    <span class="keyword">typeof</span> b;</span><br><span class="line">    <span class="string">&quot;number&quot;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 特殊的NaN 数值类型 表示的意思是&#x27;不是一个数字&#x27; not a number</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 类型转换</span></span><br><span class="line">    <span class="built_in">parseInt</span>()</span><br><span class="line">    <span class="built_in">parseFloat</span>()</span><br><span class="line"></span><br><span class="line">    <span class="built_in">parseInt</span>(<span class="string">&#x27;123456&#x27;</span>)  <span class="comment">// 123456</span></span><br><span class="line">    <span class="built_in">parseFloat</span>(<span class="string">&#x27;11.11&#x27;</span>)  <span class="comment">// 11.11</span></span><br><span class="line">    <span class="built_in">parseInt</span>(<span class="string">&#x27;11.11&#x27;</span>)  <span class="comment">// 11</span></span><br><span class="line">    <span class="built_in">parseInt</span>(<span class="string">&#x27;123asd123asd&#x27;</span>)  <span class="comment">// 123</span></span><br><span class="line">    <span class="built_in">parseInt</span>(<span class="string">&#x27;asdqweasd123wqdasd&#x27;</span>)  <span class="comment">// NaN</span></span><br></pre></td></tr></table></figure>

<h2 id="四、字符类型-string"><a href="#四、字符类型-string" class="headerlink" title="四、字符类型(string)"></a>四、字符类型(string)</h2><h3 id="4-1-字符类型介绍"><a href="#4-1-字符类型介绍" class="headerlink" title="4.1 字符类型介绍"></a>4.1 字符类型介绍</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 引号</span><br><span class="line">    <span class="keyword">var</span> s = <span class="string">&#x27;ame&#x27;</span></span><br><span class="line">    <span class="literal">undefined</span></span><br><span class="line">    <span class="keyword">typeof</span> s </span><br><span class="line">    <span class="string">&#x27;string&#x27;</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> s1 = <span class="string">&quot;ame&quot;</span></span><br><span class="line">    <span class="keyword">typeof</span> s1</span><br><span class="line">    <span class="string">&quot;string&quot;</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> s2 = <span class="string">&#x27;&#x27;</span><span class="string">&#x27;ame&#x27;</span><span class="string">&#x27;&#x27;</span>  <span class="comment">// 不支持三引号</span></span><br><span class="line">    <span class="attr">VM665</span>:<span class="number">1</span> Uncaught <span class="built_in">SyntaxError</span>: Unexpected string</span><br><span class="line"><span class="number">2.</span> 模板字符串 <span class="string">``</span>  <span class="comment">// 是ESC下面的那个键</span></span><br><span class="line">    <span class="keyword">var</span> s3 = <span class="string">`</span></span><br><span class="line"><span class="string">    asd</span></span><br><span class="line"><span class="string">    asd</span></span><br><span class="line"><span class="string">    asd</span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">    <span class="keyword">typeof</span> s3</span><br><span class="line">    <span class="string">&#x27;string&#x27;</span></span><br><span class="line">    <span class="comment">// 模板字符串除了可以定义多行文本之外还可以实现格式化字符串操作</span></span><br><span class="line">    <span class="comment">// 书写$&#123;&#125; 会自动去前面找大括号里面变量名对应的值 如果没有定义直接报错</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> name = <span class="string">&#x27;jason&#x27;</span></span><br><span class="line">    <span class="keyword">var</span> sss = <span class="string">`</span></span><br><span class="line"><span class="string">        my name is <span class="subst">$&#123;name&#125;</span> and my age is <span class="subst">$&#123;age&#125;</span></span></span><br><span class="line"><span class="string">    `</span></span><br><span class="line">    sss</span><br><span class="line">    <span class="string">&quot;</span></span><br><span class="line"><span class="string">    my name is ame and my age is 18</span></span><br><span class="line"><span class="string">    &quot;</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> s4 = <span class="string">`my name is <span class="subst">$&#123;namemmmmm&#125;</span>`</span></span><br><span class="line">    <span class="attr">VM1140</span>:<span class="number">1</span> Uncaught <span class="built_in">ReferenceError</span>: namemmmmm is not defined at &lt;anonymous&gt;:<span class="number">1</span>:<span class="number">24</span></span><br><span class="line">	</span><br><span class="line">	<span class="comment">// 在写js代码的时候 不要去管左侧箭头的内容</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/* 字符串的拼接</span></span><br><span class="line"><span class="comment">   在python中不推荐你使用+做拼接 推荐使用 join方法</span></span><br><span class="line"><span class="comment">   但是在JS中推荐你直接使用+做拼接*/</span></span><br></pre></td></tr></table></figure>

<h3 id="4-2-字符类型常用方法"><a href="#4-2-字符类型常用方法" class="headerlink" title="4.2 字符类型常用方法"></a>4.2 字符类型常用方法</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 返回长度</span><br><span class="line">	.length</span><br><span class="line"><span class="number">2.</span> 移除空白</span><br><span class="line">	.trim()</span><br><span class="line">		<span class="number">2.1</span> 移除左边的空白</span><br><span class="line">        	.trimLeft()</span><br><span class="line">		<span class="number">2.2</span> 移除右边的空白</span><br><span class="line">        	.trimRight()</span><br><span class="line"><span class="number">3.</span> 返回第n个字符</span><br><span class="line">	.charAt(n)</span><br><span class="line"><span class="number">4.</span> 拼接</span><br><span class="line">	.concat(value, ...)</span><br><span class="line">	联想记忆</span><br><span class="line">            MySQL</span><br><span class="line">            	concat</span><br><span class="line">            	concat_ws</span><br><span class="line">            	group_concat</span><br><span class="line">            Python</span><br><span class="line">            	join</span><br><span class="line"><span class="number">5.</span> 子序列位置</span><br><span class="line">	.indexOf(substring, start)</span><br><span class="line"><span class="number">6.</span> 根据索引取子序列</span><br><span class="line">	.substring(<span class="keyword">from</span>, to)</span><br><span class="line"><span class="number">7.</span> 切片</span><br><span class="line">	.slice(start, end)</span><br><span class="line"><span class="number">8.</span> 小写</span><br><span class="line">	.toLowerCase()</span><br><span class="line"><span class="number">9.</span> 大写</span><br><span class="line">	.toUpperCase()</span><br><span class="line"><span class="number">10.</span> 切割</span><br><span class="line">	.split(delimiter, limit)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 记忆的时候一定要对比python去记</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="五、布尔值-boolean"><a href="#五、布尔值-boolean" class="headerlink" title="五、布尔值(boolean)"></a>五、布尔值(boolean)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 在Python中布尔值的首字母大写的</span><br><span class="line">	True</span><br><span class="line">	False</span><br><span class="line"><span class="number">2.</span> 但是在JS中布尔值是全小写的</span><br><span class="line">	<span class="literal">true</span></span><br><span class="line">	<span class="literal">false</span></span><br><span class="line"><span class="number">3.</span> 在JS中布尔值是<span class="literal">false</span>的有哪些</span><br><span class="line">	空字符串、<span class="number">0</span>、<span class="literal">null</span>、<span class="literal">undefined</span>、<span class="literal">NaN</span></span><br><span class="line">  </span><br><span class="line"><span class="number">4.</span> <span class="literal">null</span>与<span class="literal">undefined</span></span><br><span class="line">	<span class="number">4.1</span> <span class="literal">null</span></span><br><span class="line">		表示值为空 一般都是指定或者清空一个变量时使用</span><br><span class="line">        	name = <span class="string">&#x27;ame&#x27;</span></span><br><span class="line">			name = <span class="literal">null</span></span><br><span class="line">	<span class="number">4.2</span> <span class="literal">undefined</span></span><br><span class="line">		标识声明了一个变量 但是没有做初始化操作(没有给值)</span><br><span class="line">		函数没有指定返回值的时候 返回的也是<span class="literal">undefined</span></span><br><span class="line">    ps 给个好的博客图解：厕所卷纸</span><br><span class="line">    	<span class="attr">https</span>:<span class="comment">//www.cnblogs.com/Dominic-Ji/p/9111021.html</span></span><br><span class="line"></span><br></pre></td></tr></table></figure>



<h2 id="六、对象"><a href="#六、对象" class="headerlink" title="六、对象"></a>六、对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br></pre></td><td class="code"><pre><span class="line">JS是一切皆对象的编程语言</span><br><span class="line"><span class="number">1.</span> 数组(类似于python里面的列表)</span><br><span class="line">	<span class="number">1.1</span> 索引</span><br><span class="line">        <span class="keyword">var</span> l = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>]</span><br><span class="line">        <span class="keyword">typeof</span> l</span><br><span class="line">        <span class="string">&#x27;object&#x27;</span></span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> l1= [<span class="number">1</span>, a, <span class="number">11.11</span>, <span class="literal">true</span>]</span><br><span class="line">        <span class="keyword">var</span>[<span class="number">1</span>]  <span class="comment">// &#x27;a&#x27;</span></span><br><span class="line">        l1[-<span class="number">1</span>]  <span class="comment">// 不支持负数索引</span></span><br><span class="line"></span><br><span class="line">	<span class="number">1.2</span> 长度</span><br><span class="line">		<span class="keyword">var</span> l = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">    	l.length  <span class="comment">// 6</span></span><br><span class="line"></span><br><span class="line">	<span class="number">1.3</span> 向尾部添加元素 并返回新长度</span><br><span class="line">    	l.push(<span class="number">7</span>)  <span class="comment">// 7</span></span><br><span class="line">		l  <span class="comment">// (7) [1, 2, 3, 4, 5, 6, 7]</span></span><br><span class="line">        </span><br><span class="line">	<span class="number">1.4</span> 尾部弹出</span><br><span class="line">    	l.pop()  <span class="comment">// 777</span></span><br><span class="line">		l  <span class="comment">// (6) [1, 2, 3, 4, 5, 6]</span></span><br><span class="line">        </span><br><span class="line">     <span class="number">1.5</span> 头部增加元素</span><br><span class="line">     	l.unshift(<span class="number">123</span>)</span><br><span class="line">		l  <span class="comment">// (7) [123, 1, 2, 3, 4, 5, 6]</span></span><br><span class="line">      </span><br><span class="line">     <span class="number">1.6</span> 头部删除元素</span><br><span class="line">     	l.shift()  <span class="comment">// 123</span></span><br><span class="line">		l  <span class="comment">// (6) [1, 2, 3, 4, 5, 6]</span></span><br><span class="line">     </span><br><span class="line">     <span class="number">1.7</span> 从已有的数组中返回选定的元素</span><br><span class="line">     	l.slice(<span class="number">0</span>, <span class="number">3</span>)  <span class="comment">// (3) [1, 2, 3]</span></span><br><span class="line">	</span><br><span class="line">	<span class="number">1.8</span> 颠倒数组中元素的顺序</span><br><span class="line">    	l.reverse()  <span class="comment">// (6) [6, 5, 4, 3, 2, 1]</span></span><br><span class="line">	</span><br><span class="line">	<span class="number">1.9</span> 数组中的所有元素放入一个字符串 以指定的符号分隔</span><br><span class="line">		l.join(<span class="string">&#x27;$&#x27;</span>)  # 跟python刚好相反</span><br><span class="line">		<span class="comment">// &quot;6$5$4$3$2$1&quot;</span></span><br><span class="line"></span><br><span class="line">	<span class="number">1.10</span> 和另外一个数组合并</span><br><span class="line">		l.concat([<span class="number">111</span>,<span class="number">222</span>,<span class="number">333</span>])  # extend</span><br><span class="line">		<span class="comment">// (9) [6, 5, 4, 3, 2, 1, 111, 222, 333]</span></span><br><span class="line">        </span><br><span class="line">	<span class="number">1.11</span> 升序排列</span><br><span class="line">		l.sort()  <span class="comment">// (6) [1, 2, 3, 4, 5, 6]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 比较重要的三个方法</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> ll = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">    ll.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;<span class="built_in">console</span>.log(value)&#125;,ll)</span><br><span class="line">    <span class="attr">VM2277</span>:<span class="number">1</span> <span class="number">111</span>  # 一个参数就是数组里面每一个元素对象</span><br><span class="line">    <span class="attr">VM2277</span>:<span class="number">1</span> <span class="number">222</span></span><br><span class="line">    <span class="attr">VM2277</span>:<span class="number">1</span> <span class="number">333</span></span><br><span class="line">    <span class="attr">VM2277</span>:<span class="number">1</span> <span class="number">444</span></span><br><span class="line">    <span class="attr">VM2277</span>:<span class="number">1</span> <span class="number">555</span></span><br><span class="line">    <span class="attr">VM2277</span>:<span class="number">1</span> <span class="number">666</span>	</span><br><span class="line"></span><br><span class="line">    ll.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value, index</span>)</span>&#123;<span class="built_in">console</span>.log(value, index)&#125;,ll)</span><br><span class="line">    <span class="attr">VM2346</span>:<span class="number">1</span> <span class="number">111</span> <span class="number">0</span>  # 两个参数就是元素 + 元素索引</span><br><span class="line">    <span class="attr">VM2346</span>:<span class="number">1</span> <span class="number">222</span> <span class="number">1</span></span><br><span class="line">    <span class="attr">VM2346</span>:<span class="number">1</span> <span class="number">333</span> <span class="number">2</span></span><br><span class="line">    <span class="attr">VM2346</span>:<span class="number">1</span> <span class="number">444</span> <span class="number">3</span></span><br><span class="line">    <span class="attr">VM2346</span>:<span class="number">1</span> <span class="number">555</span> <span class="number">4</span></span><br><span class="line">    <span class="attr">VM2346</span>:<span class="number">1</span> <span class="number">666</span> <span class="number">5</span></span><br><span class="line"></span><br><span class="line">    ll.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value, index, arr</span>)</span>&#123;<span class="built_in">console</span>.log(value, index, arr)&#125;, ll)</span><br><span class="line">    <span class="attr">VM2430</span>:<span class="number">1</span> <span class="number">111</span> <span class="number">0</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>]  # 元素 + 元素索引 + 元素的数据来源</span><br><span class="line">    <span class="attr">VM2430</span>:<span class="number">1</span> <span class="number">222</span> <span class="number">1</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>]</span><br><span class="line">    <span class="attr">VM2430</span>:<span class="number">1</span> <span class="number">333</span> <span class="number">2</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>]</span><br><span class="line">    <span class="attr">VM2430</span>:<span class="number">1</span> <span class="number">444</span> <span class="number">3</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>]</span><br><span class="line">    <span class="attr">VM2430</span>:<span class="number">1</span> <span class="number">555</span> <span class="number">4</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>]</span><br><span class="line">    <span class="attr">VM2430</span>:<span class="number">1</span> <span class="number">666</span> <span class="number">5</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>]</span><br><span class="line"></span><br><span class="line">    ll.forEach(<span class="function"><span class="keyword">function</span>(<span class="params">value,index,arr,xxx</span>)</span>&#123;<span class="built_in">console</span>.log(value,index,arr,xxx)&#125;,ll)  </span><br><span class="line">    <span class="attr">VM2532</span>:<span class="number">1</span> <span class="number">111</span> <span class="number">0</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>] <span class="literal">undefined</span>  # 最多三个</span><br><span class="line">    <span class="attr">VM2532</span>:<span class="number">1</span> <span class="number">222</span> <span class="number">1</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>] <span class="literal">undefined</span></span><br><span class="line">    <span class="attr">VM2532</span>:<span class="number">1</span> <span class="number">333</span> <span class="number">2</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>] <span class="literal">undefined</span></span><br><span class="line">    <span class="attr">VM2532</span>:<span class="number">1</span> <span class="number">444</span> <span class="number">3</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>] <span class="literal">undefined</span></span><br><span class="line">    <span class="attr">VM2532</span>:<span class="number">1</span> <span class="number">555</span> <span class="number">4</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>] <span class="literal">undefined</span></span><br><span class="line">    <span class="attr">VM2532</span>:<span class="number">1</span> <span class="number">666</span> <span class="number">5</span> (<span class="number">6</span>) [<span class="number">111</span>, <span class="number">222</span>, <span class="number">333</span>, <span class="number">444</span>, <span class="number">555</span>, <span class="number">666</span>] <span class="literal">undefined</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// splice用法</span></span><br><span class="line">    <span class="keyword">var</span> ll = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">    <span class="literal">undefined</span></span><br><span class="line">    ll.splice(<span class="number">0</span>, <span class="number">3</span>)  # 两个参数 第一个是起始位置 第二个是删除的个数</span><br><span class="line">    (<span class="number">3</span>) [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>]</span><br><span class="line">    l1</span><br><span class="line">    (<span class="number">3</span>) [<span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"></span><br><span class="line">	ll.splice(<span class="number">0</span>, <span class="number">1</span>, <span class="number">7</span>)  # 先删除后添加</span><br><span class="line">	[<span class="number">4</span>]</span><br><span class="line">	ll</span><br><span class="line">    (<span class="number">3</span>) [<span class="number">7</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">    </span><br><span class="line">	ll.splice(<span class="number">0</span>, <span class="number">1</span>, [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>])</span><br><span class="line">	[<span class="number">7</span>]</span><br><span class="line">	ll</span><br><span class="line">	(<span class="number">3</span>) [<span class="built_in">Array</span>(<span class="number">4</span>), <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">/* map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。</span></span><br><span class="line"><span class="comment">   map() 方法按照原始数组元素顺序依次处理元素。</span></span><br><span class="line"><span class="comment">   注意： map() 不会对空数组进行检测。</span></span><br><span class="line"><span class="comment">   注意： map() 不会改变原始数组。*/</span></span><br><span class="line">    <span class="keyword">var</span> l1 = [<span class="number">11</span>,<span class="number">22</span>,<span class="number">33</span>,<span class="number">44</span>,<span class="number">55</span>,<span class="number">66</span>]</span><br><span class="line">    <span class="literal">undefined</span></span><br><span class="line">    l1.map(<span class="function"><span class="keyword">function</span>(<span class="params">value</span>)</span>&#123;<span class="built_in">console</span>.log(value)&#125;,l1)</span><br><span class="line">    <span class="attr">VM3115</span>:<span class="number">1</span> <span class="number">11</span></span><br><span class="line">    <span class="attr">VM3115</span>:<span class="number">1</span> <span class="number">22</span></span><br><span class="line">    <span class="attr">VM3115</span>:<span class="number">1</span> <span class="number">33</span></span><br><span class="line">    <span class="attr">VM3115</span>:<span class="number">1</span> <span class="number">44</span></span><br><span class="line">    <span class="attr">VM3115</span>:<span class="number">1</span> <span class="number">55</span></span><br><span class="line">    <span class="attr">VM3115</span>:<span class="number">1</span> <span class="number">66</span></span><br><span class="line">    l1.map(<span class="function"><span class="keyword">function</span>(<span class="params">value,index</span>)</span>&#123;<span class="keyword">return</span> value*<span class="number">2</span>&#125;,l1)</span><br><span class="line">    (<span class="number">6</span>) [<span class="number">22</span>, <span class="number">44</span>, <span class="number">66</span>, <span class="number">88</span>, <span class="number">110</span>, <span class="number">132</span>]</span><br><span class="line">    l1.map(<span class="function"><span class="keyword">function</span>(<span class="params">value,index,arr</span>)</span>&#123;<span class="keyword">return</span> value*<span class="number">2</span>&#125;,l1)</span><br><span class="line">    (<span class="number">6</span>) [<span class="number">22</span>, <span class="number">44</span>, <span class="number">66</span>, <span class="number">88</span>, <span class="number">110</span>, <span class="number">132</span>]</span><br></pre></td></tr></table></figure>

<h2 id="七、运算符"><a href="#七、运算符" class="headerlink" title="七、运算符"></a>七、运算符</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 算术运算符</span><br><span class="line">	<span class="keyword">var</span> x = <span class="number">10</span>;</span><br><span class="line">	<span class="keyword">var</span> res1 = x++;  </span><br><span class="line">	<span class="keyword">var</span> res2 = ++x;  </span><br><span class="line">	res1  <span class="comment">// 10</span></span><br><span class="line">    res2  <span class="comment">// 12</span></span><br><span class="line">    <span class="comment">// ++表示自增 类似于 +=1</span></span><br><span class="line">    <span class="comment">// 加号在前先加再赋值  加号在后先赋值后加</span></span><br><span class="line">    </span><br><span class="line"><span class="number">2.</span> 比较运算符</span><br><span class="line">	<span class="number">1</span> == <span class="string">&#x27;1&#x27;</span>  <span class="comment">// 弱等于 内部自动转换成相同的数据类型比较了</span></span><br><span class="line">	<span class="literal">true</span></span><br><span class="line">	<span class="number">1</span> === <span class="string">&#x27;1&#x27;</span>  <span class="comment">// 强等于 内部不做类型转换</span></span><br><span class="line"></span><br><span class="line">	<span class="number">1</span> != <span class="string">&#x27;1&#x27;</span></span><br><span class="line">	<span class="literal">false</span></span><br><span class="line">	<span class="number">1</span> !== <span class="string">&#x27;2&#x27;</span></span><br><span class="line">	<span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> 逻辑运算符</span><br><span class="line">	python中 and or not</span><br><span class="line">    js中 &amp;&amp; || ！</span><br><span class="line">	<span class="number">5</span> &amp;&amp; <span class="string">&#x27;5&#x27;</span></span><br><span class="line">	<span class="string">&#x27;5&#x27;</span></span><br><span class="line"></span><br><span class="line">	<span class="number">0</span> || <span class="number">1</span></span><br><span class="line">	<span class="number">1</span></span><br><span class="line">	</span><br><span class="line">	!<span class="number">5</span> &amp;&amp; <span class="string">&#x27;5&#x27;</span></span><br><span class="line">	<span class="literal">false</span></span><br><span class="line"></span><br><span class="line">	<span class="comment">/*一定要注意到底什么时候返回的是布尔值 什么是返回的数据</span></span><br><span class="line"><span class="comment">	  按照后端逻辑理解吧 js这块看看就好了*/</span></span><br><span class="line"></span><br><span class="line"><span class="number">4.</span> 赋值运算符</span><br><span class="line">	= += -= *= ...</span><br></pre></td></tr></table></figure>

<h2 id="八、流程控制"><a href="#八、流程控制" class="headerlink" title="八、流程控制"></a>八、流程控制</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> <span class="keyword">if</span>判断</span><br><span class="line">	<span class="comment">// if &amp; else</span></span><br><span class="line">	<span class="keyword">var</span> age = <span class="number">28</span>;</span><br><span class="line">	<span class="keyword">if</span>(age&gt;<span class="number">18</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;come baby dont be shy&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;ugly 拒&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">	</span><br><span class="line">	<span class="comment">// if &amp; else if &amp; else</span></span><br><span class="line">	<span class="keyword">if</span> (age&lt;<span class="number">18</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;认识一下&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="keyword">else</span> <span class="keyword">if</span>(<span class="number">18</span>&lt;age&lt;<span class="number">24</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;我是你的fans&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;bye&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">	<span class="comment">/*</span></span><br><span class="line"><span class="comment">	在JS中代码是没有缩进的 只不过我们python人书写习惯而已</span></span><br><span class="line"><span class="comment">	()条件</span></span><br><span class="line"><span class="comment">	&#123;&#125;代码块</span></span><br><span class="line"><span class="comment">	*/</span></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> <span class="keyword">switch</span>语法</span><br><span class="line"><span class="comment">// 我们提前列举好可能出现的条件和解决方式</span></span><br><span class="line">    <span class="keyword">var</span> num = <span class="number">2</span>;</span><br><span class="line">    <span class="keyword">switch</span>(num)&#123;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;喝酒&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;  # 不加<span class="keyword">break</span> 匹配到一个之后 就一直往下执行</span><br><span class="line">      <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;唱歌&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;洗脚&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">3</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;按摩&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">4</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;营养快线&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">case</span> <span class="number">5</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;老板慢走 欢迎下次光临&#x27;</span>);</span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">      <span class="keyword">default</span>:</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;条件都没有匹配上 默认走的流程&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> <span class="keyword">for</span>循环</span><br><span class="line">    <span class="comment">// 来打印0~9数字</span></span><br><span class="line">        <span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;<span class="number">10</span>;i++)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i)</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="comment">// 循环打印出数组里面的每一个元素</span></span><br><span class="line">    <span class="keyword">var</span> l1 = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>]</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> i=<span class="number">0</span>;i&lt;l1.length;i++)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(l1[i])</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="number">4.</span> <span class="keyword">while</span>循环</span><br><span class="line">    <span class="keyword">var</span> i = <span class="number">0</span></span><br><span class="line">    <span class="keyword">while</span>(i&lt;<span class="number">100</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(i)</span><br><span class="line">        i++;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="number">5.</span> 三元运算符</span><br><span class="line">    <span class="comment">//python中三元运算符 res = 1 if 1&gt;2 else 3</span></span><br><span class="line">    <span class="comment">//JS中三元运算 res = 1&gt;2?1:3 </span></span><br><span class="line">    条件成立取问好后面的<span class="number">1</span> 不成立取冒号后面的<span class="number">3</span></span><br><span class="line">    <span class="keyword">var</span> res = <span class="number">2</span>&gt;<span class="number">5</span>?<span class="number">8</span>:<span class="number">10</span> # <span class="number">10</span></span><br><span class="line">    <span class="keyword">var</span> res = <span class="number">2</span>&gt;<span class="number">5</span>?<span class="number">8</span>:(<span class="number">8</span>&gt;<span class="number">5</span>?<span class="number">666</span>:<span class="number">444</span>)  # <span class="number">666</span></span><br><span class="line">    <span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">    三元运算符不要写的过于复杂 </span></span><br><span class="line"><span class="string">    &quot;</span><span class="string">&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h2 id="九、函数"><a href="#九、函数" class="headerlink" title="九、函数"></a>九、函数</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">在python定义函数需要用到关键字def</span></span><br><span class="line"><span class="comment">在JS中定义函数需要用到关键字function</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="number">1.</span>格式</span><br><span class="line">	<span class="function"><span class="keyword">function</span> 函数名(<span class="params">形参<span class="number">1</span>，形参<span class="number">2</span>，形参<span class="number">3.</span>..</span>)</span>&#123;函数体代码&#125;</span><br><span class="line"></span><br><span class="line"><span class="number">2.</span>无参函数</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;hello world&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">    func1()  <span class="comment">// 调用加括号 这个跟python是一样的</span></span><br><span class="line"></span><br><span class="line"><span class="number">3.</span>有参函数</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params">a, b</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(a, b)</span><br><span class="line">    &#125;</span><br><span class="line">    func2(<span class="number">1</span>, <span class="number">2</span>)</span><br><span class="line"></span><br><span class="line">    func2(<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>, <span class="number">6</span>)  <span class="comment">// 多了没关系 只要对应的数据</span></span><br><span class="line">    <span class="attr">VM3610</span>:<span class="number">2</span> <span class="number">1</span> <span class="number">2</span></span><br><span class="line">    <span class="literal">undefined</span></span><br><span class="line"></span><br><span class="line">    func2(<span class="number">1</span>)  <span class="comment">// 少了也没关系</span></span><br><span class="line">    <span class="attr">VM3610</span>:<span class="number">2</span> <span class="number">1</span> <span class="literal">undefined</span></span><br><span class="line"></span><br><span class="line"><span class="number">4.</span> 关键字<span class="built_in">arguments</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params">a, b</span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">arguments</span>)  <span class="comment">// 能够获取到函数接收到的所有参数</span></span><br><span class="line">        <span class="built_in">console</span>.log(a, b)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params">a,b</span>)</span>&#123;</span><br><span class="line">      <span class="keyword">if</span>(<span class="built_in">arguments</span>.length&lt;<span class="number">2</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;传少了&#x27;</span>)</span><br><span class="line">      &#125;<span class="keyword">else</span> <span class="keyword">if</span> (<span class="built_in">arguments</span>.length&gt;<span class="number">2</span>)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;传多了&#x27;</span>)</span><br><span class="line">      &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;正常执行&#x27;</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="number">5.</span> 函数的返回值 使用的也是关键字<span class="keyword">return</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">index</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="number">666</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">index</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">      <span class="keyword">return</span> <span class="number">666</span>,<span class="number">777</span>,<span class="number">888</span>,<span class="number">999</span></span><br><span class="line">    &#125;</span><br><span class="line">    res = index();</span><br><span class="line">    <span class="number">999</span></span><br><span class="line">    res</span><br><span class="line">    <span class="number">999</span>  <span class="comment">// 只能拿到最后一个</span></span><br><span class="line"></span><br><span class="line">	<span class="function"><span class="keyword">function</span> <span class="title">index</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span>[<span class="number">666</span>,<span class="number">777</span>,<span class="number">888</span>,<span class="number">999</span>]</span><br><span class="line">    &#125;  <span class="comment">// js不支持解压赋值</span></span><br><span class="line"></span><br><span class="line"><span class="number">6.</span> 匿名函数 没有名字</span><br><span class="line">    <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">&#x27;哈哈哈&#x27;</span>)</span><br><span class="line">    &#125;  <span class="comment">// 错误</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> res = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        consolo.log(<span class="string">&#x27;哈哈哈&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="number">7.</span>箭头函数(要了解一下) 主要用来处理简单的业务逻辑 类似于python中的匿名函数</span><br><span class="line">    <span class="keyword">var</span> func1 = <span class="function"><span class="params">v</span> =&gt;</span> v;  <span class="comment">// 箭头左边的是形参 右边的是返回值</span></span><br><span class="line">    等价于</span><br><span class="line">    <span class="keyword">var</span> func1 = <span class="function"><span class="keyword">function</span>(<span class="params">v</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> v</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> func2 = <span class="function">(<span class="params">arg1, arg2</span>) =&gt;</span> arg1 + arg2</span><br><span class="line">    等价于</span><br><span class="line">    <span class="keyword">var</span> func1 = <span class="function"><span class="keyword">function</span>(<span class="params">arg1, arg2</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> arg1 + arg2</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>



<h2 id="十、函数的全局变量与局部变量"><a href="#十、函数的全局变量与局部变量" class="headerlink" title="十、函数的全局变量与局部变量"></a>十、函数的全局变量与局部变量</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 跟python查找变量的顺序一致</span></span><br><span class="line">    <span class="keyword">var</span> city = <span class="string">&#x27;BeiJing&#x27;</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> city = <span class="string">&#x27;ShangHai&#x27;</span>;</span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">inner</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">var</span> city = <span class="string">&#x27;ShenZhen&#x27;</span>;</span><br><span class="line">            <span class="built_in">console</span>.log(city);</span><br><span class="line">        &#125;</span><br><span class="line">        inner();</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    f();  <span class="comment">//输出结果是?</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> city = <span class="string">&quot;BeiJing&quot;</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">Bar</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">console</span>.log(city);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">var</span> city = <span class="string">&quot;ShangHai&quot;</span>;</span><br><span class="line">      <span class="keyword">return</span> Bar;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> ret = f();</span><br><span class="line">    ret();  <span class="comment">// 打印结果是？</span></span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> city = <span class="string">&quot;BeiJing&quot;</span>;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> city = <span class="string">&quot;ShangHai&quot;</span>;</span><br><span class="line">        <span class="function"><span class="keyword">function</span> <span class="title">inner</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(city);</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> inner;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> ret = f();</span><br><span class="line">    ret();</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="十一、词法分析-直接忽略把"><a href="#十一、词法分析-直接忽略把" class="headerlink" title="十一、词法分析(直接忽略把)"></a>十一、词法分析(直接忽略把)</h2><h2 id="十二、自定义对象"><a href="#十二、自定义对象" class="headerlink" title="十二、自定义对象"></a>十二、自定义对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 你可以看成是我们python中的字典 但是js中的自定义对象要比python里面的字典操作起来更加的方便</span></span><br><span class="line"></span><br><span class="line"><span class="number">1.</span>创建自定义对象&#123;&#125;</span><br><span class="line">	<span class="number">1.1</span> 第一种创建自定义对象的方式</span><br><span class="line">    	<span class="keyword">var</span> d = &#123;<span class="string">&#x27;name&#x27;</span>: <span class="string">&#x27;ame&#x27;</span>, <span class="string">&#x27;age&#x27;</span>:<span class="number">18</span>&#125;</span><br><span class="line">        <span class="keyword">typeof</span> d</span><br><span class="line">        <span class="string">&#x27;object&#x27;</span></span><br><span class="line">		</span><br><span class="line">		d[<span class="string">&#x27;name&#x27;</span>]</span><br><span class="line">		<span class="string">&#x27;ame&#x27;</span></span><br><span class="line">		d.name  <span class="comment">// 比python从字典获取值更加的方便</span></span><br><span class="line">		<span class="string">&#x27;ame&#x27;</span></span><br><span class="line">		d.age</span><br><span class="line">		<span class="number">18</span></span><br><span class="line">		</span><br><span class="line">		<span class="keyword">for</span>(<span class="keyword">let</span> i <span class="keyword">in</span> d)&#123;</span><br><span class="line">            <span class="built_in">console</span>.log(i, d[i])</span><br><span class="line">        &#125;  <span class="comment">// 支持for循环 暴露给外界可以直接获取的也是键</span></span><br><span class="line">		</span><br><span class="line">	<span class="number">1.2</span> 第二种创建自定义对象的方式 需要使用关键字---<span class="keyword">new</span></span><br><span class="line">    	<span class="keyword">var</span> d2 = <span class="keyword">new</span> <span class="built_in">Object</span>()  <span class="comment">// &#123;&#125;</span></span><br><span class="line">		</span><br><span class="line">		d2.name = <span class="string">&#x27;ame&#x27;</span></span><br><span class="line">		&#123;<span class="attr">name</span>: <span class="string">&#x27;ame&#x27;</span>&#125;</span><br><span class="line">		</span><br><span class="line">		d2[<span class="string">&#x27;age&#x27;</span>] = <span class="number">18</span></span><br><span class="line">		&#123;<span class="attr">name</span>: <span class="string">&#x27;ame&#x27;</span>, <span class="attr">age</span>: <span class="number">18</span>&#125;</span><br></pre></td></tr></table></figure>



<h2 id="十三、Date对象"><a href="#十三、Date对象" class="headerlink" title="十三、Date对象"></a>十三、Date对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> d3 = <span class="keyword">new</span> Data()</span><br><span class="line">	Wed Jul <span class="number">07</span> <span class="number">2021</span> <span class="number">23</span>:<span class="number">30</span>:<span class="number">13</span> GMT+<span class="number">0800</span> (中国标准时间)</span><br><span class="line"></span><br><span class="line">d3.toLocaleString()</span><br><span class="line">	<span class="string">&quot;2021/7/7下午11:30:13&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 也支持自己手动输入时间</span></span><br><span class="line">    <span class="keyword">let</span> d4 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">&#x27;2200/11/11 11:11:11&#x27;</span>)</span><br><span class="line">    de.toLocaleString()</span><br><span class="line"></span><br><span class="line">    <span class="keyword">let</span> d5 = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">1111</span>,<span class="number">11</span>,<span class="number">11</span>,<span class="number">11</span>,<span class="number">11</span>,<span class="number">11</span>)</span><br><span class="line">    d5.toLocaleString()  <span class="comment">// 月份从0开始0-11月</span></span><br><span class="line">    “<span class="number">1111</span>/<span class="number">12</span>/<span class="number">11</span> 上午<span class="number">11</span>:<span class="number">11</span>:<span class="number">11</span>”</span><br><span class="line"></span><br><span class="line"><span class="comment">//事件对象具体方法</span></span><br><span class="line">    <span class="keyword">let</span> d6 = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">    d6.getDate()  		获取日</span><br><span class="line">    d6.getDay()			获取星期</span><br><span class="line">    d6.getMonth()		获取月份(<span class="number">0</span>-<span class="number">11</span>)</span><br><span class="line">    d6.getFullYear()	获取完整的年份</span><br><span class="line">    d6.getHours()		获取小时</span><br><span class="line">    d6.getMinutes()		获取分钟</span><br><span class="line">    d6.getSeconds()		获取秒</span><br><span class="line">    d6.getMilliseconds() 获取毫秒</span><br><span class="line">    d6.getTime()		时间戳</span><br></pre></td></tr></table></figure>

<h2 id="十四、json对象"><a href="#十四、json对象" class="headerlink" title="十四、json对象"></a>十四、json对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">在python中序列化反序列化</span></span><br><span class="line"><span class="comment">	dumps  序列化</span></span><br><span class="line"><span class="comment">	loads  反序列化</span></span><br><span class="line"><span class="comment">在JS中也有序列化反序列化</span></span><br><span class="line"><span class="comment">	JSON.stringify()</span></span><br><span class="line"><span class="comment">	JSON.parse()</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> d7 = &#123;<span class="string">&#x27;name&#x27;</span>: <span class="string">&#x27;ame&#x27;</span>, <span class="string">&#x27;age&#x27;</span>: <span class="number">18</span>&#125;</span><br><span class="line"><span class="keyword">let</span> res666 = <span class="built_in">JSON</span>.stringify(d7)</span><br><span class="line"><span class="string">&quot;&#123;&quot;</span>name<span class="string">&quot;:&quot;</span>ame<span class="string">&quot;,&quot;</span>age<span class="string">&quot;:18&#125;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.parse(res666)</span><br><span class="line">&#123;<span class="string">&#x27;name&#x27;</span>: <span class="string">&#x27;ame&#x27;</span>, <span class="string">&#x27;age&#x27;</span>: <span class="number">18</span>&#125;</span><br></pre></td></tr></table></figure>

<h2 id="十五、RegExp对象"><a href="#十五、RegExp对象" class="headerlink" title="十五、RegExp对象"></a>十五、RegExp对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">在python中如果需要使用正则 需要借助于re模块</span></span><br><span class="line"><span class="comment">在JS中需要你创建正则对象</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"><span class="number">1.</span>第一种 有点麻烦</span><br><span class="line">	<span class="keyword">let</span> reg1 = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">&#x27;^[a-zA-Z][a-zA-Z0-9]&#123;5,11&#125;&#x27;</span>)</span><br><span class="line"><span class="number">2.</span> 第二种 个人推荐</span><br><span class="line">	<span class="keyword">let</span> reg2 = <span class="regexp">/^[a-zA-Z][a-zA-Z0-9]&#123;5,11&#125;/</span></span><br><span class="line">    </span><br><span class="line"><span class="comment">// 匹配内容</span></span><br><span class="line">    reg1.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line">    reg2.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 题目 获取字符串里面所有的字母s</span></span><br><span class="line">    <span class="keyword">let</span> sss = <span class="string">&#x27;egondsb dsb dsb&#x27;</span></span><br><span class="line">    sss.match(<span class="regexp">/s/</span>)  <span class="comment">// 拿到一个就停止了</span></span><br><span class="line">    sss.match(<span class="regexp">/s/g</span>)	 <span class="comment">// 全局匹配  g就表示全局模式</span></span><br><span class="line"></span><br><span class="line">    sss.match(<span class="regexp">/s/</span>)</span><br><span class="line">    [<span class="string">&quot;s&quot;</span>, <span class="attr">index</span>: <span class="number">5</span>, <span class="attr">input</span>: <span class="string">&quot;egondsb dsb dsb&quot;</span>, <span class="attr">groups</span>: <span class="literal">undefined</span>]</span><br><span class="line">    sss.match(<span class="regexp">/s/g</span>)</span><br><span class="line">    (<span class="number">3</span>) [<span class="string">&quot;s&quot;</span>, <span class="string">&quot;s&quot;</span>, <span class="string">&quot;s&quot;</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 全局匹配模式吐槽点</span></span><br><span class="line">    <span class="keyword">let</span> reg3 = <span class="regexp">/^[a-zA-Z][a-zA-Z0-9]&#123;5,11&#125;/g</span></span><br><span class="line">    reg2.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line"></span><br><span class="line">    reg3.test(<span class="string">&#x27;egondsb&#x27;</span>)  <span class="comment">// 全局模式有一个lastIndex属性</span></span><br><span class="line">    <span class="literal">true</span></span><br><span class="line">    reg3.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line">    <span class="literal">false</span></span><br><span class="line">    reg3.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line">    <span class="literal">true</span></span><br><span class="line">    reg3.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line">    <span class="literal">false</span></span><br><span class="line"></span><br><span class="line">    reg3.lastIndex</span><br><span class="line">    <span class="number">0</span></span><br><span class="line">    reg3.test(<span class="string">&#x27;egondsb&#x27;</span>)</span><br><span class="line">    <span class="literal">true</span></span><br><span class="line">    reg3.lastIndex</span><br><span class="line">    <span class="number">7</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 吐槽点二 </span></span><br><span class="line">    <span class="keyword">let</span> reg4 = <span class="regexp">/^[a-zA-Z][a-zA-Z0-9]&#123;5,11&#125;/</span></span><br><span class="line">    reg4.test()</span><br><span class="line"></span><br><span class="line">    reg4.test()  <span class="comment">// 什么都不传 默认传的是undefined</span></span><br><span class="line">    <span class="literal">true</span></span><br><span class="line">    reg4.test()</span><br><span class="line">    <span class="literal">true</span></span><br><span class="line"></span><br><span class="line">    reg4.test(<span class="literal">undefined</span>)</span><br><span class="line">    <span class="literal">true</span></span><br><span class="line">    <span class="keyword">let</span> reg5 = <span class="regexp">/undefined/</span></span><br><span class="line">    <span class="literal">undefined</span></span><br><span class="line">    reg5.test(<span class="string">&#x27;jason&#x27;</span>)</span><br><span class="line">    <span class="literal">false</span></span><br><span class="line">    reg5.test()</span><br><span class="line">    <span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">总结 你在用js书写正则的时候一定要注意上述问题</span></span><br><span class="line"><span class="string">一般情况下你后续也不会解除到了</span></span><br><span class="line"><span class="string">&quot;</span><span class="string">&quot;&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="十六、Math对象-有兴趣就看一下"><a href="#十六、Math对象-有兴趣就看一下" class="headerlink" title="十六、Math对象(有兴趣就看一下)"></a>十六、Math对象(有兴趣就看一下)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">abs(x)      返回数的绝对值。</span><br><span class="line">exp(x)      返回 e 的指数。</span><br><span class="line">floor(x)    对数进行下舍入。</span><br><span class="line">log(x)      返回数的自然对数（底为e）。</span><br><span class="line">max(x,y)    返回 x 和 y 中的最高值。</span><br><span class="line">min(x,y)    返回 x 和 y 中的最低值。</span><br><span class="line">pow(x,y)    返回 x 的 y 次幂。</span><br><span class="line">random()    返回 <span class="number">0</span> ~ <span class="number">1</span> 之间的随机数。</span><br><span class="line">round(x)    把数四舍五入为最接近的整数。</span><br><span class="line">sin(x)      返回数的正弦。</span><br><span class="line">sqrt(x)     返回数的平方根。</span><br><span class="line">tan(x)      返回角的正切。</span><br></pre></td></tr></table></figure>



<h2 id="十七、BOM操作"><a href="#十七、BOM操作" class="headerlink" title="十七、BOM操作"></a>十七、BOM操作</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    BOM </span></span><br><span class="line"><span class="comment">        浏览器对象 Browser Object Model</span></span><br><span class="line"><span class="comment">            JS代码操作浏览器</span></span><br><span class="line"><span class="comment">    DOM </span></span><br><span class="line"><span class="comment">        文档对象模型 Document Object Model</span></span><br><span class="line"><span class="comment">            JS代码操作标签</span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="17-1-BOM操作"><a href="#17-1-BOM操作" class="headerlink" title="17.1 BOM操作"></a>17.1 BOM操作</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// window对象</span></span><br><span class="line">    <span class="built_in">window</span>对象指代的就是浏览器窗口</span><br><span class="line"></span><br><span class="line">    <span class="built_in">window</span>.innerHeight 浏览器窗口的高度</span><br><span class="line">    <span class="number">900</span></span><br><span class="line">    <span class="built_in">window</span>.innerWidth 浏览器窗口的宽度</span><br><span class="line">    <span class="number">1680</span></span><br><span class="line"></span><br><span class="line">    <span class="built_in">window</span>.open(<span class="string">&#x27;http://www.mzitu.com/&#x27;</span>,<span class="string">&#x27;&#x27;</span>,<span class="string">&#x27;height=400px,width=400px,top=400pxmleft=400px&#x27;</span>)</span><br><span class="line">    <span class="comment">// 新建窗口打开页面 第二个参数写空即可 第三个参数写新建的窗口的大小和位置</span></span><br><span class="line">    <span class="comment">// 扩展父子页面通信window.opener()   了解</span></span><br><span class="line">    <span class="built_in">window</span>.close()  <span class="comment">// 关闭当前页面</span></span><br></pre></td></tr></table></figure>

<h3 id="17-2-window子对象"><a href="#17-2-window子对象" class="headerlink" title="17.2 window子对象"></a>17.2 window子对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.navigator.appName</span><br><span class="line"><span class="string">&#x27;Netscape&#x27;</span></span><br><span class="line"><span class="built_in">window</span>.navigator.appVersion</span><br><span class="line"><span class="string">&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.navigator.userAgent  <span class="comment">// (掌握) 用来表示当前是否是一个浏览器</span></span><br><span class="line"><span class="string">&quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    拓展：防爬措施</span></span><br><span class="line"><span class="comment">        1.最简单最常用的一个就是校验当前请求的发起者是否是一个浏览器</span></span><br><span class="line"><span class="comment">            userAgent</span></span><br><span class="line"><span class="comment">            &quot;Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 			Safari/537.36&quot;</span></span><br><span class="line"><span class="comment">            如何破解该措施</span></span><br><span class="line"><span class="comment">                在你的代码中加上上面的user-agent配置即可</span></span><br><span class="line"><span class="comment">*/</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.navigator.platform</span><br><span class="line"><span class="string">&#x27;&quot;Win32&quot;&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 如果是window的子对象 那么window可以省略不写</span></span><br></pre></td></tr></table></figure>

<h3 id="17-3-history对象"><a href="#17-3-history对象" class="headerlink" title="17.3 history对象"></a>17.3 history对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.history.back()  <span class="comment">// 回退到上一页</span></span><br><span class="line"><span class="built_in">window</span>.history.forward()  <span class="comment">// 前进到下一页</span></span><br><span class="line"><span class="comment">// 对应的就是你浏览器左上方的两个的箭头</span></span><br></pre></td></tr></table></figure>

<h3 id="17-4-location对象"><a href="#17-4-location对象" class="headerlink" title="17.4 location对象"></a>17.4 location对象</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.location.href  <span class="comment">// 获取当前页面的url</span></span><br><span class="line"><span class="built_in">window</span>.location.href = url  <span class="comment">// 跳转到指定的url</span></span><br><span class="line"><span class="built_in">window</span>.location.reload()  <span class="comment">// 属性页面 浏览器左上方的小圆圈</span></span><br></pre></td></tr></table></figure>

<h3 id="17-5-弹出框"><a href="#17-5-弹出框" class="headerlink" title="17.5 弹出框"></a>17.5 弹出框</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>警告框</span><br><span class="line">	alert(<span class="string">&#x27;你不要过来啊！！！&#x27;</span>)</span><br><span class="line">	<span class="literal">undefined</span></span><br><span class="line"><span class="number">2.</span>确认框  <span class="comment">// 会有确认 取消两个选择框 取消则传入false 确认传入true</span></span><br><span class="line">	confirm(<span class="string">&#x27;你确定真的要这么做嘛&#x27;</span>)</span><br><span class="line">	<span class="literal">false</span></span><br><span class="line">	confirm(<span class="string">&#x27;你确定真的要这么做嘛&#x27;</span>)</span><br><span class="line">	<span class="literal">true</span></span><br><span class="line"><span class="number">3.</span>提示框  <span class="comment">// 有一个input框 可以获取用户输入后的数据</span></span><br><span class="line">	prompt(<span class="string">&#x27;手牌号给我看一下&#x27;</span>,<span class="string">&#x27;22号消费888&#x27;</span>);</span><br><span class="line">	<span class="string">&#x27;来宾三位&#x27;</span></span><br></pre></td></tr></table></figure>

<h3 id="17-6计时器相关"><a href="#17-6计时器相关" class="headerlink" title="17.6计时器相关"></a>17.6计时器相关</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 计时器特点</span><br><span class="line">	<span class="number">1.1</span> 过一段时间之后触发(一次)</span><br><span class="line">	<span class="number">1.2</span> 每隔一段时间触发一次(循环)</span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> 代码演示</span><br><span class="line">	&lt;script&gt;</span><br><span class="line">    	<span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    		alert(<span class="number">123</span>)</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">let</span> t = <span class="built_in">setTimeout</span>(func1, <span class="number">3000</span>);  <span class="comment">// 毫秒为单位 3秒之后自动执行func1函数</span></span><br><span class="line">		<span class="built_in">clearTimeout</span>(t)  <span class="comment">// 取消定时任务 如果你想要清除定时任务 需要日前用变量指代定时任务</span></span><br><span class="line">		</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            alert(<span class="number">123</span>)</span><br><span class="line">        &#125;</span><br><span class="line">		<span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">            <span class="keyword">let</span> t = <span class="built_in">setInterval</span>(func2, <span class="number">3000</span>);  <span class="comment">// 每隔3秒执行一次</span></span><br><span class="line">            <span class="function"><span class="keyword">function</span> <span class="title">inner</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">                <span class="built_in">clearInterval</span>(t)  <span class="comment">// 清除定时器</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="built_in">setTimeout</span>(inner,<span class="number">9000</span>)  <span class="comment">// 9秒之后触发</span></span><br><span class="line">        &#125;</span><br><span class="line">		show()	</span><br><span class="line">    &lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h2 id="十八、DOM操作"><a href="#十八、DOM操作" class="headerlink" title="十八、DOM操作"></a>十八、DOM操作</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment">    DOM树的概念</span></span><br><span class="line"><span class="comment">    所有的标签都可以称之为是节点</span></span><br><span class="line"><span class="comment">    JavaScript 可以通过DOM创建动态的 HTML：</span></span><br><span class="line"><span class="comment">    JavaScript 能够改变页面中的所有 HTML 元素</span></span><br><span class="line"><span class="comment">    JavaScript 能够改变页面中的所有 HTML 属性</span></span><br><span class="line"><span class="comment">    JavaScript 能够改变页面中的所有 CSS 样式</span></span><br><span class="line"><span class="comment">    JavaScript 能够对页面中的所有事件做出反应</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    DOM操作操作的是标签 而一个html页面上的标签有很多 </span></span><br><span class="line"><span class="comment">        1.先学如何查找标签</span></span><br><span class="line"><span class="comment">        2.再学DOM操作标签</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">    DOM操作需要用关键字document起手</span></span><br><span class="line"><span class="comment"></span></span><br><span class="line"><span class="comment">*/</span></span><br></pre></td></tr></table></figure>

<h3 id="18-1-查找标签"><a href="#18-1-查找标签" class="headerlink" title="18.1 查找标签"></a>18.1 查找标签</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>直接查找(必须要掌握)</span><br><span class="line">	id查找</span><br><span class="line">    类查找</span><br><span class="line">    标签查找</span><br><span class="line">  	<span class="comment">// 注意三个方法的返回值是不一样的</span></span><br><span class="line">    <span class="built_in">document</span>.getElementByID(<span class="string">&#x27;d1&#x27;</span>)</span><br><span class="line">	&lt;p id=<span class="string">&quot;d1&quot;</span>&gt;div&gt;p &lt;/p&gt;</span><br><span class="line"></span><br><span class="line">	<span class="built_in">document</span>.getElementsByClassName(<span class="string">&#x27;c1&#x27;</span>)</span><br><span class="line">	HTMLCollection [div.c1]</span><br><span class="line"></span><br><span class="line">	<span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;div&#x27;</span>)</span><br><span class="line">	HTMLCollection(<span class="number">3</span>) [div#d1, div, div, <span class="attr">d1</span>: div#d1]</span><br><span class="line">    <span class="keyword">let</span> divEle = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;div&#x27;</span>)[<span class="number">1</span>]</span><br><span class="line">	divEle</span><br><span class="line">	&lt;div&gt;​div&gt;div​&lt;/div&gt;​</span><br><span class="line"><span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">当你用变量名指代标签对象的时候 一般情况下都推荐你书写成</span></span><br><span class="line"><span class="string">xxxEle</span></span><br><span class="line"><span class="string">	divEle</span></span><br><span class="line"><span class="string">	aEle</span></span><br><span class="line"><span class="string">	pEle</span></span><br><span class="line"><span class="string">&quot;</span><span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> 间接查找(熟悉)</span><br><span class="line"><span class="keyword">let</span> pEle = docu,ent.getElementsByClassName(<span class="string">&#x27;c1&#x27;</span>)[<span class="number">0</span>]  <span class="comment">// 注意是否需要索引取值</span></span><br><span class="line"></span><br><span class="line">pEle.parentElement  <span class="comment">// 拿父节点</span></span><br><span class="line">&lt;div id=&gt;</span><br></pre></td></tr></table></figure>

<h3 id="18-2-节点操作"><a href="#18-2-节点操作" class="headerlink" title="18.2 节点操作"></a>18.2 节点操作</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">通过DOM操作动态的创建img标签</span></span><br><span class="line"><span class="string">并且给标签加属性</span></span><br><span class="line"><span class="string">最后将标签添加到文本中</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line">let imgEle = document.createElement(<span class="string">&#x27;img&#x27;</span>)  <span class="comment"># 创建标签</span></span><br><span class="line"></span><br><span class="line">imgEle.src = <span class="string">&#x27;111.png&#x27;</span>  <span class="comment"># 给标签设置默认的属性</span></span><br><span class="line"><span class="string">&quot;111.png&quot;</span></span><br><span class="line">imgEle</span><br><span class="line"></span><br><span class="line">imgEle.username = <span class="string">&#x27;jason&#x27;</span>  <span class="comment"># 自定义的属性没办法点的方式直接设置</span></span><br><span class="line"><span class="string">&quot;jason&quot;</span></span><br><span class="line">imgEle</span><br><span class="line">&lt;img src=​<span class="string">&quot;111.png&quot;</span>&gt;​</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">imgEle.setAttribute(<span class="string">&#x27;username&#x27;</span>,<span class="string">&#x27;jason&#x27;</span>)   <span class="comment"># 既可以设置自定义的属性也可以设置默认的书写</span></span><br><span class="line">undefined</span><br><span class="line">imgEle</span><br><span class="line">&lt;img src=​<span class="string">&quot;111.png&quot;</span> username=​<span class="string">&quot;jason&quot;</span>&gt;​</span><br><span class="line">imgEle.setAttribute(<span class="string">&#x27;title&#x27;</span>,<span class="string">&#x27;一张图片&#x27;</span>)</span><br><span class="line">imgEle</span><br><span class="line">&lt;img src=​<span class="string">&quot;111.png&quot;</span> username=​<span class="string">&quot;jason&quot;</span> title=​<span class="string">&quot;一张图片&quot;</span>&gt;​</span><br><span class="line"></span><br><span class="line">let divEle = document.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">divEle.appendChild(imgEle)  <span class="comment"># 标签内部添加元素(尾部追加)</span></span><br><span class="line">&lt;img src=​<span class="string">&quot;111.png&quot;</span> username=​<span class="string">&quot;jason&quot;</span> title=​<span class="string">&quot;一张图片&quot;</span>&gt;​</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">创建a标签</span></span><br><span class="line"><span class="string">设置属性</span></span><br><span class="line"><span class="string">设置文本</span></span><br><span class="line"><span class="string">添加到标签内部</span></span><br><span class="line"><span class="string">	添加到指定的标签的上面</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line">let aEle = document.createElement(<span class="string">&#x27;a&#x27;</span>)</span><br><span class="line"></span><br><span class="line">aEle</span><br><span class="line">&lt;a&gt;​&lt;/a&gt;​</span><br><span class="line">aEle.href = <span class="string">&#x27;https://www.mzitu.com/&#x27;</span></span><br><span class="line"><span class="string">&quot;https://www.mzitu.com/&quot;</span></span><br><span class="line">aEle</span><br><span class="line">&lt;a href=​<span class="string">&quot;https:​/​/​www.mzitu.com/​&quot;</span>&gt;​&lt;/a&gt;​</span><br><span class="line"></span><br><span class="line">aEle.innerText = <span class="string">&#x27;点我有你好看!&#x27;</span>  <span class="comment"># 给标签设置文本内容</span></span><br><span class="line"><span class="string">&quot;点我有你好看!&quot;</span></span><br><span class="line">aEle</span><br><span class="line">&lt;a href=​<span class="string">&quot;https:​/​/​www.mzitu.com/​&quot;</span>&gt;​点我有你好看!​&lt;/a&gt;​</span><br><span class="line">let divEle = document.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">let pEle = document.getElementById(<span class="string">&#x27;d2&#x27;</span>)</span><br><span class="line">undefined</span><br><span class="line">divEle.insertBefore(aEle,pEle)  <span class="comment"># 添加标签内容指定位置添加</span></span><br><span class="line">&lt;a href=​<span class="string">&quot;https:​/​/​www.mzitu.com/​&quot;</span>&gt;​点我有你好看!​&lt;/a&gt;​</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"><span class="string">额外补充</span></span><br><span class="line"><span class="string">	appendChild()</span></span><br><span class="line"><span class="string">		removeChild()</span></span><br><span class="line"><span class="string">		replaceChild()</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">	</span></span><br><span class="line"><span class="string">	setAttribute()  设置属性</span></span><br><span class="line"><span class="string">		getAttribute()  获取属性</span></span><br><span class="line"><span class="string">		removeAttribute()  移除属性</span></span><br><span class="line"><span class="string">&quot;&quot;&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="comment"># innerText与innerHTML</span></span><br><span class="line">divEle.innerText  <span class="comment"># 获取标签内部所有的文本</span></span><br><span class="line"><span class="string">&quot;div 点我有你好看!</span></span><br><span class="line"><span class="string">div&gt;p</span></span><br><span class="line"><span class="string">div&gt;span&quot;</span></span><br><span class="line"></span><br><span class="line">divEle.innerHTML  <span class="comment"># 内部文本和标签都拿到</span></span><br><span class="line"><span class="string">&quot;div</span></span><br><span class="line"><span class="string">        &lt;a href=&quot;</span>https://www.mzitu.com/<span class="string">&quot;&gt;点我有你好看!&lt;/a&gt;&lt;p id=&quot;</span>d2<span class="string">&quot;&gt;div&amp;gt;p&lt;/p&gt;</span></span><br><span class="line"><span class="string">        &lt;span&gt;div&amp;gt;span&lt;/span&gt;</span></span><br><span class="line"><span class="string">    &quot;</span></span><br><span class="line">    </span><br><span class="line">divEle.innerText = <span class="string">&#x27;heiheihei&#x27;</span></span><br><span class="line"><span class="string">&quot;heiheihei&quot;</span></span><br><span class="line">divEle.innerHTML = <span class="string">&#x27;hahahaha&#x27;</span></span><br><span class="line"><span class="string">&quot;hahahaha&quot;</span></span><br><span class="line"></span><br><span class="line">divEle.innerText = <span class="string">&#x27;&lt;h1&gt;heiheihei&lt;/h1&gt;&#x27;</span>  <span class="comment"># 不识别html标签</span></span><br><span class="line"><span class="string">&quot;&lt;h1&gt;heiheihei&lt;/h1&gt;&quot;</span></span><br><span class="line">divEle.innerHTML = <span class="string">&#x27;&lt;h1&gt;hahahaha&lt;/h1&gt;&#x27;</span>  <span class="comment"># 识别html标签</span></span><br><span class="line"><span class="string">&quot;&lt;h1&gt;hahahaha&lt;/h1&gt;&quot;</span></span><br></pre></td></tr></table></figure>



<h3 id="18-3-获取值操作"><a href="#18-3-获取值操作" class="headerlink" title="18.3 获取值操作"></a>18.3 获取值操作</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"># 获取用户数据标签内部的数据</span><br><span class="line"><span class="keyword">let</span> seEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d2&#x27;</span>)</span><br><span class="line">seEle.value</span><br><span class="line"><span class="string">&quot;111&quot;</span></span><br><span class="line">seEle.value</span><br><span class="line"><span class="string">&quot;333&quot;</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> inputEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span><br><span class="line">inputEle.value</span><br><span class="line"></span><br><span class="line"># 如何获取用户上传的文件数据</span><br><span class="line"><span class="keyword">let</span> fileEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d3&#x27;</span>)</span><br><span class="line">fileEle.value  # 无法获取到文件数据</span><br><span class="line"><span class="string">&quot;C:\fakepath\02_测试路由.png&quot;</span></span><br><span class="line"></span><br><span class="line">fileEle.files</span><br><span class="line">FileList &#123;<span class="number">0</span>: File, <span class="attr">length</span>: <span class="number">1</span>&#125;<span class="number">0</span>: File &#123;<span class="attr">name</span>: <span class="string">&quot;02_测试路由.png&quot;</span>, <span class="attr">lastModified</span>: <span class="number">1557043082000</span>, <span class="attr">lastModifiedDate</span>: Sun May <span class="number">05</span> <span class="number">2019</span> <span class="number">15</span>:<span class="number">58</span>:<span class="number">02</span> GMT+<span class="number">0800</span> (中国标准时间), <span class="attr">webkitRelativePath</span>: <span class="string">&quot;&quot;</span>, <span class="attr">size</span>: <span class="number">29580</span>, …&#125;length: 1__proto__: FileList</span><br><span class="line">      </span><br><span class="line">fileEle.files[<span class="number">0</span>]  # 获取文件数据</span><br><span class="line">File &#123;<span class="attr">name</span>: <span class="string">&quot;02_测试路由.png&quot;</span>, <span class="attr">lastModified</span>: <span class="number">1557043082000</span>, <span class="attr">lastModifiedDate</span>: Sun May <span class="number">05</span> <span class="number">2019</span> <span class="number">15</span>:<span class="number">58</span>:<span class="number">02</span> GMT+<span class="number">0800</span> (中国标准时间), <span class="attr">webkitRelativePath</span>: <span class="string">&quot;&quot;</span>, <span class="attr">size</span>: <span class="number">29580</span>, …&#125;</span><br></pre></td></tr></table></figure>



<h3 id="18-4-class-css操作"><a href="#18-4-class-css操作" class="headerlink" title="18.4 class css操作"></a>18.4 class css操作</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> divEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line">divEle.classList  # 获取标签所有的类属性</span><br><span class="line">DOMTokenList(<span class="number">3</span>) [<span class="string">&quot;c1&quot;</span>, <span class="string">&quot;bg_red&quot;</span>, <span class="string">&quot;bg_green&quot;</span>, <span class="attr">value</span>: <span class="string">&quot;c1 bg_red bg_green&quot;</span>]</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">divEle.classList.remove(<span class="string">&#x27;bg_red&#x27;</span>)  # 移除某个类属性</span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line"></span><br><span class="line">divEle.classList.add(<span class="string">&#x27;bg_red&#x27;</span>)  # 添加类属性</span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line">divEle.classList.contains(<span class="string">&#x27;c1&#x27;</span>)  # 验证是否包含某个类属性</span><br><span class="line"><span class="literal">true</span></span><br><span class="line">divEle.classList.contains(<span class="string">&#x27;c2&#x27;</span>)</span><br><span class="line"><span class="literal">false</span></span><br><span class="line"></span><br><span class="line">divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)  # 有则删除无则添加</span><br><span class="line"><span class="literal">false</span></span><br><span class="line">divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)</span><br><span class="line"><span class="literal">true</span></span><br><span class="line">divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)</span><br><span class="line"><span class="literal">false</span></span><br><span class="line">divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)</span><br><span class="line"><span class="literal">true</span></span><br><span class="line">divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)</span><br><span class="line"><span class="literal">false</span></span><br><span class="line">divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)</span><br><span class="line"><span class="literal">true</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"># DOM操作操作标签样式 统一先用style起手</span><br><span class="line"><span class="keyword">let</span> pEle = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&#x27;p&#x27;</span>)[<span class="number">0</span>]</span><br><span class="line"><span class="literal">undefined</span></span><br><span class="line">pEle.style.color = <span class="string">&#x27;red&#x27;</span></span><br><span class="line"><span class="string">&quot;red&quot;</span></span><br><span class="line">pEle.style.fontSize = <span class="string">&#x27;28px&#x27;</span></span><br><span class="line"><span class="string">&quot;28px&quot;</span></span><br><span class="line">pEle.style.backgroundColor = <span class="string">&#x27;yellow&#x27;</span></span><br><span class="line"><span class="string">&quot;yellow&quot;</span></span><br><span class="line">pEle.style.border = <span class="string">&#x27;3px solid red&#x27;</span></span><br><span class="line"><span class="string">&quot;3px solid red&quot;</span></span><br></pre></td></tr></table></figure>



<h2 id="十九、事件"><a href="#十九、事件" class="headerlink" title="十九、事件"></a>十九、事件</h2><h3 id="19-1-返回事件的两种方式"><a href="#19-1-返回事件的两种方式" class="headerlink" title="19.1 返回事件的两种方式"></a>19.1 返回事件的两种方式</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">达到某个事先设定的条件 自动触发的动作</span></span><br><span class="line"><span class="string">&quot;</span><span class="string">&quot;&quot;</span></span><br><span class="line"># 绑定事件的两种方式</span><br><span class="line">&lt;button onclick=<span class="string">&quot;func1()&quot;</span>&gt;点我&lt;/button&gt;</span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;d1&quot;</span>&gt;</span>点我<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">// 第一种绑定事件的方式</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="function"><span class="keyword">function</span> <span class="title">func1</span>(<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        alert(<span class="number">111</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="comment">// 第二种</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">    <span class="keyword">let</span> btnEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d1&#x27;</span>);</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    btnEle.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        alert(<span class="number">222</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="string">&quot;&quot;</span><span class="string">&quot;</span></span><br><span class="line"><span class="string">script标签既可以放在head内 也可以放在body内</span></span><br><span class="line"><span class="string">但是通常情况下都是放在body内的最底部</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string"># 等待浏览器窗口加载完毕之后再执行代码</span></span><br><span class="line"><span class="string">window.onload = function () &#123;</span></span><br><span class="line"><span class="string">            // 第一种绑定事件的方式</span></span><br><span class="line"><span class="string">            function func1() &#123;</span></span><br><span class="line"><span class="string">                alert(111)</span></span><br><span class="line"><span class="string">            &#125;</span></span><br><span class="line"><span class="string">            // 第二种</span></span><br><span class="line"><span class="string">            let btnEle = document.getElementById(&#x27;d1&#x27;);</span></span><br><span class="line"><span class="string">            btnEle.onclick = function () &#123;</span></span><br><span class="line"><span class="string">                alert(222)</span></span><br><span class="line"><span class="string">            &#125;</span></span><br><span class="line"><span class="string">        &#125;</span></span><br><span class="line"><span class="string">&quot;</span><span class="string">&quot;&quot;</span></span><br></pre></td></tr></table></figure>

<h3 id="19-2-JS事件绑定"><a href="#19-2-JS事件绑定" class="headerlink" title="19.2 JS事件绑定"></a>19.2 JS事件绑定</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 我们直接写几个案例 看懂即可</span></span><br><span class="line"><span class="number">1.</span> 开关灯案例</span><br><span class="line">    &lt;div id=<span class="string">&quot;d1&quot;</span> <span class="class"><span class="keyword">class</span></span>=<span class="string">&quot;c1 bg_red bg_green&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">        <span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;d2&quot;</span>&gt;</span>变色<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">        <span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="keyword">let</span> btnEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d2&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="keyword">let</span> divEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            btnEle.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;  <span class="comment">// 绑定点击事件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">                <span class="comment">// 动态的修改div标签的类属性</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">                divEle.classList.toggle(<span class="string">&#x27;bg_red&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span>input框获取焦点失去焦点案例</span><br><span class="line">    &lt;input type=<span class="string">&quot;text&quot;</span> value=<span class="string">&quot;老板 去吗?&quot;</span> id=<span class="string">&quot;d1&quot;</span>&gt;</span><br><span class="line"></span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="keyword">let</span> iEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="comment">// 获取焦点事件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        iEle.onfocus = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="comment">// 将input框内部值去除</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            iEle.value = <span class="string">&#x27;&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="comment">//  点value就是获取   等号赋值就是设置</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="comment">// 失去焦点事件</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        iEle.onblur = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="comment">// 给input标签重写赋值</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            iEle.value = <span class="string">&#x27;没钱 不去!&#x27;</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="number">3.</span>实时展示当前时间</span><br><span class="line">    &lt;input type=<span class="string">&quot;text&quot;</span> id=<span class="string">&quot;d1&quot;</span> style=<span class="string">&quot;display: block;height: 50px;width: 200px&quot;</span>&gt;</span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;d2&quot;</span>&gt;</span>开始<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;d3&quot;</span>&gt;</span>结束<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">    <span class="xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="comment">// 先定义一个全局存储定时器的变量</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="keyword">let</span> t = <span class="literal">null</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="keyword">let</span> inputEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d1&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="keyword">let</span> startBtnEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d2&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="keyword">let</span> endBtnEle = <span class="built_in">document</span>.getElementById(<span class="string">&#x27;d3&#x27;</span>)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="comment">// 1 访问页面之后 将访问的时间展示到input框中</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="comment">// 2 动态展示当前时间</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="comment">// 3 页面上加两个按钮 一个开始 一个结束</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        <span class="function"><span class="keyword">function</span> <span class="title">showTime</span>(<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="keyword">let</span> currentTime = <span class="keyword">new</span> <span class="built_in">Date</span>();</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            inputEle.value = currentTime.toLocaleString()</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml"></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        startBtnEle.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="comment">// 限制定时器只能开一个</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="keyword">if</span>(!t)&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">                t = <span class="built_in">setInterval</span>(showTime,<span class="number">1000</span>)  <span class="comment">// 每点击一次就会开设一个定时器 而t只指代最后一个</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">        endBtnEle.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="built_in">clearInterval</span>(t)</span></span></span><br><span class="line"><span class="javascript"><span class="xml">            <span class="comment">// 还应该将t重置为空</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">            t = <span class="literal">null</span></span></span></span><br><span class="line"><span class="javascript"><span class="xml">        &#125;</span></span></span><br><span class="line"><span class="javascript"><span class="xml">    </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="number">4.</span>省市联动</span><br><span class="line">    &lt;!DOCTYPE html&gt;</span><br><span class="line">    &lt;html lang=&quot;en&quot;&gt;</span><br><span class="line">    &lt;head&gt;</span><br><span class="line">        &lt;meta charset=&quot;UTF-8&quot;&gt;</span><br><span class="line">        &lt;title&gt;Title&lt;/title&gt;</span><br><span class="line">        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;</span><br><span class="line">    &lt;/head&gt;</span><br><span class="line">    &lt;body&gt;</span><br><span class="line">    &lt;select name=&quot;&quot; id=&quot;d1&quot;&gt;</span><br><span class="line">        &lt;option value=&quot;&quot; selected disabled&gt;--请选择--&lt;/option&gt;</span><br><span class="line">    &lt;/select&gt;</span><br><span class="line">    &lt;select name=&quot;&quot; id=&quot;d2&quot;&gt;&lt;/select&gt;</span><br><span class="line"></span><br><span class="line">    &lt;script&gt;</span><br><span class="line">        let proEle = document.getElementById(&#x27;d1&#x27;)</span><br><span class="line">        let cityEle = document.getElementById(&#x27;d2&#x27;)</span><br><span class="line">        // 先模拟省市数据</span><br><span class="line">        data = &#123;</span><br><span class="line">            &quot;河北&quot;: [&quot;廊坊&quot;, &quot;邯郸&quot;,&#x27;唐山&#x27;],</span><br><span class="line">            &quot;北京&quot;: [&quot;朝阳区&quot;, &quot;海淀区&quot;,&#x27;昌平区&#x27;],</span><br><span class="line">            &quot;山东&quot;: [&quot;威海市&quot;, &quot;烟台市&quot;,&#x27;临沂市&#x27;],</span><br><span class="line">            &#x27;上海&#x27;:[&#x27;浦东新区&#x27;,&#x27;静安区&#x27;,&#x27;黄浦区&#x27;],</span><br><span class="line">            &#x27;深圳&#x27;:[&#x27;南山区&#x27;,&#x27;宝安区&#x27;,&#x27;福田区&#x27;]</span><br><span class="line">        &#125;;</span><br><span class="line">        // 选for循环获取省</span><br><span class="line">        for(let key in data)&#123;</span><br><span class="line">            // 将省信息做成一个个option标签 添加到第一个select框中</span><br><span class="line">            // 1 创建option标签</span><br><span class="line">            let opEle = document.createElement(&#x27;option&#x27;)</span><br><span class="line">            // 2 设置文本</span><br><span class="line">            opEle.innerText = key</span><br><span class="line">            // 3 设置value</span><br><span class="line">            opEle.value = key  // &lt;option value=&quot;省&quot;&gt;省&lt;/option&gt;</span><br><span class="line">            // 4 将创建好的option标签添加到第一个select中</span><br><span class="line">            proEle.appendChild(opEle)</span><br><span class="line">        &#125;</span><br><span class="line">        // 文本域变化事件  change事件</span><br><span class="line">        proEle.onchange = function () &#123;</span><br><span class="line">            // 先获取到用户选择的省</span><br><span class="line">            let currentPro = proEle.value</span><br><span class="line">            // 获取对应的市信息</span><br><span class="line">            let currentCityList = data[currentPro]</span><br><span class="line">            // 清空市select中所有的option</span><br><span class="line">            cityEle.innerHTML = &#x27;&#x27;</span><br><span class="line">            // 自己加一个请选择</span><br><span class="line">            let ss = &quot;&lt;option disabled selected&gt;请选择&lt;/option&gt;&quot;</span><br><span class="line">            // let oppEle = document.createElement(&#x27;option&#x27;)</span><br><span class="line">            // oppEle.innerText = &#x27;请选择&#x27;</span><br><span class="line">            // oppEle.setAttribute(&#x27;selected&#x27;,&#x27;selected&#x27;)</span><br><span class="line">            cityEle.innerHTML = ss</span><br><span class="line"></span><br><span class="line">            // for循环所有的市 渲染到第二个select中</span><br><span class="line">            for (let i=0;i&lt;currentCityList.length;i++)&#123;</span><br><span class="line">                let currentCity = currentCityList[i]</span><br><span class="line">                // 1 创建option标签</span><br><span class="line">                let opEle = document.createElement(&#x27;option&#x27;)</span><br><span class="line">                // 2 设置文本</span><br><span class="line">                opEle.innerText = currentCity</span><br><span class="line">                // 3 设置value</span><br><span class="line">                opEle.value = currentCity  // &lt;option value=&quot;省&quot;&gt;省&lt;/option&gt;</span><br><span class="line">                // 4 将创建好的option标签添加到第一个select中</span><br><span class="line">                cityEle.appendChild(opEle)</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">    &lt;/body&gt;</span><br><span class="line">    &lt;/html&gt;</span><br></pre></td></tr></table></figure>


            </div>

            <!-- Post Comments -->
            
    <!-- 使用 DISQUS_CLICK -->
<div id="disqus-comment">
    <div id="disqus_thread"></div>

<!-- add animation -->
<style>
	.disqus_click_btn {
            line-height: 30px;
            margin: 0;
            min-width: 50px;
            padding: 0 14px;
            display: inline-block;
            font-family: "Roboto", "Helvetica", "Arial", sans-serif;
            font-size: 14px;
            font-weight: 400;
            text-transform: uppercase;
            letter-spacing: 0;
            overflow: hidden;
            will-change: box-shadow;
            transition: box-shadow .2s cubic-bezier(.4, 0, 1, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1);
            outline: 0;
            cursor: pointer;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            border: 0;
            background: rgba(158, 158, 158, .2);
            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
            color: #fff;
            background-color: #7EC0EE;
            text-shadow: 0
        }
</style>
	
<div class="btn_click_load" id="disqus_bt"> 
    <button class="disqus_click_btn">点击查看评论</button>
</div>

<!--
<script type="text/javascript">
$('.btn_click_load').click(function() {
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'http-miccall-tech'; // required: replace example with your forum shortname

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
      var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
      dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();

    document.getElementById('disqus_bt').style.display = "none";
});
</script>
-->
<script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://gitee.com/AmeX/amelin-ting.git/2017/10/01/%E5%89%8D%E7%AB%AF------JS/';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = 'https://gitee.com/AmeX/amelin-ting.git/2017/10/01/%E5%89%8D%E7%AB%AF------JS/'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
    };
</script>

<script type="text/javascript">
    $('.btn_click_load').click(function() {  //click to load comments
        (function() { // DON'T EDIT BELOW THIS LINE
            var d = document;
            var s = d.createElement('script');
            s.src = '//http-miccall-tech.disqus.com/embed.js';
            s.setAttribute('data-timestamp', + new Date());
            (d.head || d.body).appendChild(s);
        })();
        $('.btn_click_load').css('display','none');
    });
</script>
</div>
<style>
    #disqus-comment{
        background-color: #eee;
        padding: 2pc;
    }
</style>


        </div>
        <!-- Copyright 版权 start -->
                <div id="copyright">
            <ul>
                <li>&copy;Powered By <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/" style="border-bottom: none;">hexo</a></li>
                <li>Design: <a target="_blank" rel="noopener" href="http://miccall.tech " style="border-bottom: none;">miccall</a></li>
            </ul>
            
                <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>
			
        </div>
    </div>
</body>



 	
</html>
